<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="../login.html">login</a><br>
    <a href="../register.html">register</a>
    <hr>
    <button id="btn_alert">alert</button>
    <button id="btn_confirm">comfirm</button>
    <button id="btn_prompt">prompt</button>
    <hr>
    <button id="btn_forward">forward</button>
    <button id="btn_back">back</button>
    <input type="text" id="pageNumber" style="width:1rem" value="0"><button id="btn_go">go</button>
    <hr>
    <button id="btn_location">location.href</button>
    <input type="text" id="currentLocation" style="width:300px">
</body>

</html>
<script>
    document.getElementById("btn_alert").addEventListener('click', () => window.alert("一个弹出对话框"), false);
    document.getElementById("btn_confirm").addEventListener('click', () => {
        let flag = window.confirm("你确定进行如下操作吗？");
        if (flag) {
            console.log("开始执行...");
        } else {
            console.log("不执行任何操作");
        }
    }, false);
    document.getElementById("btn_prompt").addEventListener("click",()=>{
        let value =window.prompt("请输入你的年龄：");
        console.log(`你的年龄是：${value}`);
    },false);

    //转向下一页面
    document.getElementById('btn_back').addEventListener('click',()=>{
        history.back();
    },false);
    //转向上一个页面
    document.getElementById('btn_forward').addEventListener('click',()=>{
        history.forward();
    },false);
    //根据输入的值转向相应的页面
    document.getElementById("btn_go").addEventListener('click',()=>{
        let value = document.getElementById("pageNumber").value;
        history.go(value);
    },false);
    document.getElementById("btn_location").addEventListener('click',()=>{
        document.getElementById("currentLocation").value=location.href;
    },false);
</script>